<template>
	<view>
		<!-- <su-sticky bgColor="#fff">
		  <su-tabs
		    :list="tabMaps"
		    :scrollable="false"
		    @change="onTabsChange"
		    :current="state.currentTab"
		  ></su-tabs>
		</su-sticky> -->
		
		<view class="detail-swiper-selector">
			<!-- 汽车轮播图  -->
			<su-swiper
			  isPreview
			  :list="props.goodsSwiper"
			  dotStyle="tag"
			  imageMode="widthFix"
			  dotCur="bg-mask-40"
			  :seizeHeight="750"
			/>
		</view>
		
		<!-- <view class="ss-flex car-color">
			<view class="ss-flex car-color-type" @click="showDrawerType(1)">
				<view>全部车型</view>
				<uni-icons type="right" size="14" color="#999"></uni-icons>
			</view>
			<view class="ss-flex car-color-type" @click="showDrawerType(2)">
				<view>全部颜色</view>
				<uni-icons type="right" size="14" color="#999"></uni-icons>
			</view>
		</view> -->
		
		<view class="image-content">
			<view class="imgage-title">{{props.carInfo.name}}</view>
			
			<view class="image-list">
				<image 
					@click="goImagesDetails"
					class="image-item" 
					v-for="item in props.goodsSwiper" 
					:src="item.src"
				></image>
			</view>
			
			<view>
				<view class="more-btn" v-if="state.isMore">
					<text>查看更多</text>
					<uni-icons type="down" size="16"></uni-icons>
				</view>
				<view class="more-btn" v-else>
					<text>没有更多了</text>
				</view>
			</view>
		</view>
		
		<drawer-type ref="showDrawerTypeRef" @select="selectType"></drawer-type>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import sheep from '@/sheep';
	import DrawerType from './drawer-type';
	
	const props = defineProps({
		// 车辆信息
		carInfo: {
			type: Object,
			default: () => {}
		},
		// 轮播图
		goodsSwiper: {
			type: Array,
			default: () => []
		}
	})
	
	const tabMaps = [
		{ name: '外观', value: '1'},
		{ name: '内饰', value: '2'},
		{ name: '空间', value: '3'},
		{ name: '细节', value: '4'},
	]
	function onTabsChange(e) {
		state.currentTab = e.index
	}
	
	const state = reactive({
		isMore: false,
		currentTab: 0
	})
	
	// 选择车辆
	const showDrawerTypeRef = ref(null)
	function showDrawerType(val) {
		showDrawerTypeRef.value.showDrawerType(val);
	}
	
	function selectType(item) {
		console.log(item)
	}
	function goImagesDetails() {
		// sheep.$router.go('/pages/car/car-images-details?car_id=' + props.carInfo.id + '&title=' + props.carInfo.name)
	}
</script>

<style lang="scss" scoped>
	.car-color {
		border-bottom: 1rpx solid #cdcacf;
	}
	.car-color-type {
		flex: 1;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-right: 1rpx solid #cdcacf;
		color: #999;
	}
	.image-content {
		
		.imgage-title {
			color: #333;
			font-weight: 600;
			padding: 20rpx 30rpx;
		}
		
		.image-list {
			display: flex;
			flex-wrap: wrap;
			
			.image-item {
				width: 32%;
				margin: 0 2% 10px 0;
				height: 180rpx;
				
				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
	
	.more-btn {
		background: #ebecee;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		display: block;
		color: #333;
	}
	
	.type-title {
		
	}
</style>